import { FC, ReactNode } from 'react'
import ClassNames from 'classnames'

interface IBtnProps {
    btnType?: BtnType,
    children?: ReactNode,
    disabled?: boolean,
    btnSize?: BtnSize,
    url?: string
}

// link  url

// 类型别名
type BtnType = "primary" | "danger" | "default" | "link"
type BtnSize = "lg" | "sm"

type BtnProps = IBtnProps & React.ButtonHTMLAttributes<HTMLElement> & React.AreaHTMLAttributes<HTMLElement>


const Button: FC<BtnProps> = (props: BtnProps) => {
    const { btnType, children, disabled, btnSize, url, ...atr } = props
    const classes = ClassNames('btn', {
        [`btn-${btnType}`]: btnType,
        "disabled": disabled,
        [`btn-${btnSize}`]: btnSize,
    })
    if (btnType === "link") {
        return <a className = {classes} {...atr} href = { url }>
            { children }
        </a>
    } else {
        return <button {...atr} className={classes}>
            {children}
        </button>
    }

}

Button.defaultProps = {
    "btnType": "default"
}

export default Button


// export enum BtnType {
//     primary = "primary",
//     success = "success",
//     danger = "danger",
//     default = "default"
// }